<template>
    <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基本信息" name="basicInfo">
            <FormDetail
                    :form-items="formItems"
                    :init-data-url="initDataUrl"
                    :handle-init-data="handleInitData"
                    style="width:500px;"
                    :layout-column-num="2"
            ></FormDetail>
        </el-tab-pane>
        <el-tab-pane label="角色信息" name="roleInfo">
            <template v-if="data && data.roleAddtionalVos && data.roleAddtionalVos.length >0">
                <template v-for="(item ,index ) in data.roleAddtionalVos">
                    <Table :show-toolbar="false" :data="item.data" :key="index" :columns="[{label: '链路',formatter: ()=>{return item.desc}},{label: '链路编码',formatter: ()=>{return item.code}},{prop: 'name',label: '角色名称'}]"></Table>
                </template>
            </template>
            <template v-else>暂无数据</template>
        </el-tab-pane>
        <el-tab-pane label="功能信息" name="funcInfo">
            <template v-if="data && data.funcAddtionalVos && data.funcAddtionalVos.length >0">
                <template v-for="(item ,index ) in data.funcAddtionalVos">
                    <Table :show-toolbar="false" :data="item.data" :key="index" :columns="[{label: '链路',formatter: ()=>{return item.desc}},{label: '链路编码',formatter: ()=>{return item.code}},{prop: 'name',label: '功能名称'}]"></Table>
                </template>
            </template>
            <template v-else>暂无数据</template>
        </el-tab-pane>
        <el-tab-pane label="数据范围约束信息" name="dataScopeInfo">
            <template v-if="data && data.dataScopeAddtionalVos && data.dataScopeAddtionalVos.length >0">
                <template v-for="(item ,index ) in data.dataScopeAddtionalVos">
                    <Table :show-toolbar="false" :data="item.data" :key="index" :columns="[{label: '链路',formatter: ()=>{return item.desc}},{label: '链路编码',formatter: ()=>{return item.code}},{prop: 'name',label: '数据范围约束名称'}]"></Table>
                </template>
            </template>
            <template v-else>暂无数据</template>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
    import FormDetail from '../../../../common-util/src/components/page/FormDetail.vue'
    import Table from '../../../../common-util/src/components/page/Table.vue'
    export default {
        components:{
            FormDetail,
            Table
        },
        computed:{
            initDataUrl() {
                if(this.$route.params.userId){
                    return this.$baseURL.base +  '/base/user/' + this.$route.params.userId + '/userinfo'
                }
                return this.$baseURL.base +  '/base/user/userinfo/current'
            }
        },
        data (){
            return {
                formItems:[
                    {
                        field: {
                            name: 'user.nickname'
                        },
                        element:{
                            label: '昵称'
                        }
                    },
                    {
                        field: {
                            name: 'isSuperAdmin'
                        },
                        element:{
                            label: '超级管理员'
                        }
                    },
                    {
                        field: {
                            name: 'identifierTypeLoginDictName'
                        },
                        element:{
                            label: '登录方式'
                        }
                    },
                    {
                        field: {
                            name: 'user.genderDictName'
                        },
                        element:{
                            label: '性别'
                        }
                    },
                    {
                        field: {
                            name: 'user.deptName'
                        },
                        element:{
                            label: '归属部门'
                        }
                    },
                    {
                        field: {
                            name: 'user.compName'
                        },
                        element:{
                            label: '归属公司'
                        }
                    },
                    {
                        field: {
                            name: 'user.isVirtual'
                        },
                        element:{
                            label: '虚拟用户'
                        }
                    },
                    {
                        field: {
                            name: 'user.isLock'
                        },
                        element:{
                            label: '锁定'
                        }
                    },
                    {
                        field: {
                            name: 'userPosts',
                            value: this.userPostsValue
                        },
                        element:{
                            type: 'html',
                            label: '岗位信息'
                        }
                    }
                ],
                activeName: 'basicInfo',
                data: null
            }
        },
        mounted(){
        },
        methods:{
            handleInitData (data){
                this.data = data
                return data
            },
            userPostsValue(data){
                if(data && data.userPosts){
                    let result = []
                    data.userPosts.forEach(item =>{
                        result.push(item.compName)
                        result.push('-&gt;')
                        result.push(item.deptName)
                        result.push('-&gt;')
                        result.push(item.postName)
                        result.push(item.isEffect ? '(已生效)':  '(未生效)')
                        result.push(item.isMain ? '(主岗)':  '(兼岗)')

                        result.push('<br/>')
                    })
                    return result.join('')
                }
                return '-'
            }
        }
    }
</script>

<style scoped>
    .item {
        margin-bottom: 18px;
    }
</style>